<template>
	<view class="main">

		<view class="select">
			<picker mode="selector" :range="options" @change="handleChange">
				<view class="picker">
					选择卡牌模式
					<!-- 	当前选择：{{ selectedOption }}任务卡牌 -->
				</view>
			</picker>
		</view>


		<view class="head">
			<text class="head_txt">{{selectedOption}}</text>
		</view>
		<view class="card" :class="{'flipped': isFlipped }" @click="flipCard">
			<view class="card-inner">
				<view class="card-front">{{content}}</view>
				<view class="card-back">
					<image mode="aspectFill" class="card-back-img" src="/static/image/game/task.png">
				</view>
			</view>
		</view>

		<view class="explain">
			完成不了任务要受到对方惩罚哦
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				options: ['恋爱版', '热恋版', '同居版', '进阶版', '私密版', 'sm版', '户外版', '女仆版', '男仆版'], // 下拉列表的选项数组
				selectedOption: '未选择卡牌模式', // 当前选中的选项
				isFlipped: true, // 卡牌是否翻转的标志
				content_txt: require('./game_level.json'),
				level_serial: "level",
				content: '', //任务内容
				contents: ["未选择模式"],
				sign: require('./sign.json'),
			};
		},
		methods: {
			flipCard() {
				this.isFlipped = !this.isFlipped

				if (this.isFlipped === false) {
					let randomIndex = Math.floor(Math.random() * this.contents.length)
					this.content = this.contents[randomIndex]
				}
			},
			handleChange(event) {
				// 获取选择的索引值
				const index = event.detail.value;
				const level = index + 1;
				// 更新当前选中的选项值
				this.selectedOption = this.options[index];
				// 在这里执行选项改变时的其他操作，例如发送请求、更新数据等
				this.head_txt = this.selectedOption;
				//更加刺激等级
				if (level > 2) {
					//验证token
					let storedToken = uni.getStorageSync('token');
					let nums = this.sign['cip']
					if (!nums.includes(parseInt(storedToken))) {
				
						uni.showModal({
							title: '请输入会员激活码',
							content: '',
							editable: true,
							success: function(res) {
								let code = parseInt(res.content)
								if (!nums.includes(code)) {
									alert("激活码错误，请联系客服解锁");
									uni.navigateTo({
										url: '/pages/index/index'
									});
								} else {
									uni.setStorageSync('token', code);
								}						
							}
						});

					}
				}


			    let level_index = this.level_serial + level
				this.contents = this.content_txt[level_index]

			},

		}
	};
</script>

<style lang="scss">
	.main {
		width: 100%;
		height: 1500rpx;
		background-color: #f472b6;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
		color: #fee2e2;
	}

	.select {
		width: 100%;
		height: 50rpx;
		//border: 2px solid red; /* 四个边框统一为红色，宽度为 2px */
		display: flex;
		justify-content: flex-end;
		font-size: 30rpx;
	}

	.head {
		width: 600rpx;
		height: 100rpx;


		.head_txt {
			font-size: 50rpx;
			font-weight: bold;
			text-align: center;
			align-items: center;
			display: block;
			/* 将文本水平居中 */
		}

	}

	.card {
		width: 500rpx;
		height: 700rpx;
		perspective: 1000rpx;
		/* 透视效果 */
	}

	.card-inner {
		width: 100%;
		height: 100%;
		transition: transform 0.5s;
		/* 过渡效果 */
		transform-style: preserve-3d;
		/* 保留 3D 效果 */
	}

	.card-front,
	.card-back {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: pink;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24px;
		backface-visibility: hidden;
		text-align: center;
		color: white;
		/* 隐藏背面 */
	}

	.card-back {
		transform: rotateY(180deg);
		/* 初始时背面朝上 */
	}

	.flipped .card-inner {
		transform: rotateY(180deg);
		/* 卡牌翻转效果 */
	}


	.card-back-img {
		height: 100%;
	}


	.explain {
		width: 500rpx;
		height: 300rpx;
		text-align: center;
		font-size: 30rpx;
	}


	//弹窗
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.modal-mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
		position: fixed;
		z-index: 1003;
		left: 50%;
		top: 40%;
		transform: translate(-50%, -50%);
		background-color: white;
		padding: 20px;
		border-radius: 10px;
	}

	.input-code {
		display: block;
		border: 1px solid #ccc;
		// padding: 10px;
		margin: 10px 0;
	}

	.btn-row {
		display: flex;
		justify-content: space-around;
	}
</style>